<template>
  <div>
    <div class="td-row">
      <text class="td-serial text-muted">序号</text>
      <text class="td-text text-muted">出单号</text>
      <text class="td-text text-muted">总额</text>
      <text class="td-text text-muted">制单时间</text>
      <text class="td-text text-muted">订单状态</text>
    </div>

    <vm-status v-if="showStatus"
               empty-text="暂无出库单"
               class="bg-white"
               :type="totalPages === -1 ? 'error' : 'empty'"></vm-status>

    <list v-else
          ref="list"
          :showRefresh="true"
          :showLoadMore="showLoadMore"
          @refresh="refresh"
          @loadMore="loadmore"
          loadmoreoffset="100">
      <cell v-for="(item, index) in data"
            :key="index">
        <div class="td-row"
             @click="goDetail(item)">
          <text class="td-serial">{{index + 1}}</text>
          <text class="td-text">{{item.ship_p_id}}</text>
          <text class="td-text">{{item.total_amount}}</text>
          <text class="td-text">{{item.shipDate}}</text>
          <text :class="['td-text', item.shipStatusStyle]">{{item.shipStatus}}</text>
        </div>
      </cell>
    </list>

  </div>
</template>
<script>
import VmStatus from '../../components/vm-status.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'
import {
  enumShipStatus,
  enumShipStatusStyle
} from '../../plugins/enumChick'
export default {
  components: { VmStatus },
  props: {},
  data: () => ({
    params: {
      index: 1,
      size: 20,
      'supplier_id.eq': ''
    },
    data: [],
    totalPages: 2
  }),
  computed: {
    showLoadMore() {
      return this.totalPages > this.params.index
    },
    showStatus() {
      return this.totalPages === -1 || !this.data.length
    }
  },
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (!params) { return }
      if (params.type === 1) {
        this.$router.setBackParams({ type: 1 })
        this.refresh()
        return
      }
    }
  },
  created() {
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.params['supplier_id.eq'] = this.farm.id
        this.refresh()
      } else {
        this.$notice.toast({ message: '没有鸡场信息' })
        this.$router.setBackParams({ type: 1 })
      }
    },
    refresh() {
      this.params.index = 1
      this.getData().then(res => {
        this.data = res
      }).finally(() => {
        this.$refs["list"].refreshEnd()
      })
    },
    loadmore() {
      this.getData().then(res => {
        this.data.push(...res)
      }).finally(() => {
        this.$refs["list"].loadMoreEnd()
      })
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'ship_p_form_view',
          params: this.params,
          order: { create_time: 'desc' },
          errorMsg: '获取出库单失败'
        }).then(res => {
          this.params.index++
          this.totalPages = res && res.totalPages || 0
          const data = res && res.data || []
          resolve(data.map(item => {
            // 配货时间改为制单时间 @石勇&唐超 2019-07-29
            // item.shipDate = item.ship_p_date ? item.ship_p_date.substr(0, 10) : ''
            item.shipDate = item.create_time ? item.create_time.substr(0, 10) : ''

            item.shipStatus = enumShipStatus[item.ship_status] || '其他'
            item.shipStatusStyle = enumShipStatusStyle[item.ship_status] || ''
            return item
          }))
        }).catch(err => {
          this.totalPages = -1
          reject(err)
        })
      })
    },
    goDetail(row) {
      this.$nav.open({
        name: 'farm.ship.form',
        params: { data: row }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.text-muted {
  color: #999;
}
.text-info {
  color: $info;
}
.text-success {
  color: $success;
}
.text-error {
  color: $error;
}

.td-row {
  width: 750px;
  flex-direction: row;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.td-row:active {
  background-color: #eee;
}
.td-text {
  flex: 1;
  text-align: center;
  font-size: 25px;
}
.td-serial {
  width: 80px;
  text-align: center;
  font-size: 25px;
}
</style>
